<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>curvyCorners Demo 2</title>
<script type="text/JavaScript" src="../curvycorners.src.js"></script>
<style>

#myBox {
  margin: 0.5in auto;
  color: #fff;
  width: 800px;
  height: 550px;
  padding: 20px;
  text-align: left;
  background-image: url(backtest.jpg);
  background-repeat: no-repeat;
}

html,body {
  height: 100%;
  text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:small;
  margin: 0px;
  background-image: url(pattern.gif);
  color:#FA0;
}

</style>
<script type="text/JavaScript">

  addEvent(window, 'load', initCorners);

  function initCorners() {
    var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }

    /*
    Usage:

    curvyCorners(settingsObj, selectorStr);
    curvyCorners(settingsObj, Obj1[, Obj2[, Obj3[, . . . [, ObjN]]]]);

    selectorStr ::= complexSelector [, complexSelector]...
    complexSelector ::= singleSelector[ singleSelector]
    singleSelector ::= idType | classType
    idType ::= #id
    classType ::= [tagName].className
    tagName ::= div|p|form|blockquote|frameset // others may work
    className : .name
    selector examples:
      #mydiv p.rounded
      #mypara
      .rounded
    */
    curvyCorners(settings, "#myBox");
  }

</script>
</head>

<body>
<h1>curvyCorners Demo 2</h1>
  <div id="myBox">
  </div>
  <p>Believe it or not, in IE you need to add something like this to see the
  bottom corners.</p>
</body>
</html>